<!-- 导航进店 -->
<template>
	<view>
		<map style="width: 750rpx; height: 100vh" :latitude="latitude" :longitude="longitude" scale="16"
			:markers="covers" show-compass="true" @updated="updated"
			enable-indoorMap="true" enable-3D="true" show-location="true"></map>
		<view class="info pa">
			<view class="info-data x-bc">
				<view class="">
					<view class="x-f">
						<view class="title">{{seller.name}}</view>
						<view class="type">{{seller.status || '休息中'}}</view>
					</view>
					<view class="address">{{seller.address}}</view>
				</view>
				<image class="iphone" src="/static/image/telr_icon.png" @click="getMobile"></image>
			</view>
		</view>
		<view class="btn pa">
			<view class="botton tc" @tap.stop="jumpMap">
				到这里去
			</view>
		</view>
		<!-- 拨打电话 mobile-->
		<phone ref="phonePopup" :mobile="mobile"></phone>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				seller: state => state.sellers.sellerInfo,  // 商家信息
			})
		},
		data() {
			return {
				mobile: '',   	// 电话
				address: "",    // 地址
				latitude: "",   // 经纬度
				longitude: "",  // 经纬度
				covers: [{   	// 地图标记图片
					latitude: '',
					longitude: '',
					iconPath: '/static/image/ic_store_01.png',
					width:30,    //宽
					height:30,   //高
				}],
				key: "4c68ea9aeac446dfae048ef70dfa8b09",					 // 高德地图web服务的key，不是微信小程序的key
				url: "https://restapi.amap.com/v3/geocode/geo?parameters",   // 高德地图接口地址
				btnTitle: '到这里去'                                          // 按钮名称
			}
		},
		onLoad() {
			// 获取地址
			this.address = this.seller.address
			// 请求高德api后端，将地址转经纬度
			uni.request({
				url: this.url,
				method: 'GET',
				data: {
					key: this.key,
					address: this.address
				},
				success: (res) => {
					// 获取经纬度
					let data = res.data.geocodes[0].location;
					// 分隔经纬度
					this.longitude = data.split(',')[0];
					this.latitude = data.split(',')[1];
					// 获取地址的标记地点
					this.covers[0].longitude = this.longitude;
					this.covers[0].latitude = this.latitude;
				}
			})
		},
		methods: {
			// 电话组件显示
			showPhone() {
				this.$refs.phonePopup._data.showTel = true
			},
			// 隐藏
			closePop() {
				this.showTel = false
			},
			// 拨打电话
			getMobile() {
				this.$tools.callphone(this.seller.mobile)
			},
            jump() {
                this.$Router.back(1)
            },
			// 加载地图
			updated() {
				this.$tools.toast('正在加载地图中',"none",2000)
			},
			// 这里传入的三个参数分别是  要去的  经度 纬度 以及 地址信息
			jumpMap() {
				// 将string转number型
				let longitude = Number(this.longitude);
				let latitude = Number(this.latitude);
				let address = this.address;
				let name = this.seller.name;
				uni.openLocation({
					latitude: latitude, // 纬度，范围为-90~90，负数表示南纬
					longitude: longitude, // 经度，范围为-180~180，负数表示西经,
					name: name, // 地址名称：某某学校
					address: address, // 详细地址：某某街，某某路
					success: res => {
					},
					fail: res => {
					}
				})
			},
        }
	}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
